<template>
  <div class="commond">
     <div class="title">热销推荐</div>
     <ul>
        <router-link class="itemWrap border" v-for="item in dataList" :key="item.id" :to="'/detail/' + item.id" tag="li">
          <img class="itemImg" :src="item.imgUrl" />
          <div class="itemInfo">
            <p class="itemTitle">{{item.title}}</p>
            <p class="itemDesc">{{item.desc}}</p>
            <button class="itemBtn">查看详情</button>
          </div>
        </router-link>
     </ul>
  </div>
</template>

<script>
export default {
  name: 'Commond',
  props: {
    dataList: Array
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/mixins.styl'
.title
  margin-top:0.2rem
  line-height:0.8rem
  background:#eee
  text-indent:0.2rem
.itemWrap
  display:flex
  height:1.9rem
  .itemImg
    width:1.6rem
    height:1.6rem
    padding:.2rem
  .itemInfo
    flex:1
    padding:0.1rem
    .itemTitle
      line-height:0.5rem
      font-size:0.32rem
      ellipsis()
    .itemDesc
      line-height:0.4rem
      color:#9b9a9a
      ellipsis()
    .itemBtn
      line-height:0.44rem
      margin-top:0.14rem
      background #ff9300
      padding:0 .2rem
      border-radius:.06rem
      font-size:0.25rem
      color:#fff
</style>
